<template>
  <div class="main">
    <el-button type="primary" @click="showAddTableRow()" style="margin-bottom: 10px">
      添加
    </el-button>

    <el-table :data="formData[component['field']]" style="width: 100%" border>
      <el-table-column
        v-for="(column, colIndex) in component['columns']"
        :key="colIndex"
        :prop="column.prop"
        :label="column.label"
        :width="column.width || 'auto'"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          {{ getProp(scope.row, column.prop) }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="editRow(scope.$index)"> 修改</el-button>
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible">
      <el-form ref="tableFormRef" :model="tableFormData">
        <DynamicForm :formData="tableFormData" :components="component['components']" />
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addTableRow">确定</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="editDialogFormVisible">
      <el-form ref="tableFormRef" :model="tableFormData">
        <DynamicForm :formData="editTableFormData" :components="component['components']" />
      </el-form>
      <template #footer>
        <el-button @click="editDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateTableRow">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import { initFormData } from './DynamicForm.js';
import { ref } from 'vue';
import DynamicForm from './DynamicForm.vue';
import { ElMessage } from 'element-plus';

const { component, formData } = defineProps({
  component: {
    type: Object,
    required: true
  },
  formData: {
    type: Object,
    required: true
  }
});

const dialogFormVisible = ref(false);
const editDialogFormVisible = ref(false);
const tableFormData = ref({});
const editTableFormData = ref({});
const currentRowIndex = ref(null);
const tableFormRef = ref({});

function showAddTableRow() {
  dialogFormVisible.value = true;
  tableFormData.value = initFormData(component);
}

const field = component['field'];

function addTableRow() {
  tableFormRef.value.validate((valid, error) => {
    if (valid) {
      // 表单验证通过，执行添加操作
      formData[field].push(tableFormData.value);
      dialogFormVisible.value = false;
    } else {
      ElMessage.error('表单验证失败！');
      for (const field in error) {
        ElMessage.error(error[field][0].message);
      }
    }
  });
}

function editRow(index) {
  editDialogFormVisible.value = true;
  currentRowIndex.value = index;
  editTableFormData.value = { ...formData[field][index] };
}

function updateTableRow() {
  formData[field][currentRowIndex.value] = editTableFormData.value;
  editDialogFormVisible.value = false;
}

function deleteRow(index) {
  formData[field].splice(index, 1);
}

function getProp(row, prop) {
  let matches;

  function search(row) {
    if (typeof row !== 'object' || row === null) return;

    for (let key in row) {
      if (row.hasOwnProperty(key)) {
        if (key === prop) {
          matches = row[key];
        }

        if (typeof row[key] === 'object') {
          search(row[key]);
        }
      }
    }
  }

  search(row);

  if (Array.isArray(matches)) {
    return matches.join(',');
  } else if (typeof matches === 'string' && matches.includes('http')) {
    // 拆分多个 URL
    const urls = matches.split(',').map((url) => url.trim());
    const fileNames = urls.map((url) => {
      try {
        const parsedUrl = new URL(url);
        return decodeURIComponent(parsedUrl.pathname.split('/').pop());
      } catch (error) {
        // 如果解析失败，返回原始 URL
        return url;
      }
    });
    matches = fileNames.join(', ');
  }

  return matches;
}
</script>

<style scoped>

</style>